<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
   <meta name="description" content="Bootstrap Admin App + jQuery"/>
   <meta name="keywords" content="app, responsive, jquery, bootstrap, dashboard, admin"/>
   <title>Favorites</title>
   <link rel="icon" href="/img/icon.ico" type="image/x-icon" />
   <link rel="stylesheet" th:href="@{/vendor/fontawesome/css/font-awesome.min.css}"></link>
　　<link rel="stylesheet" th:href="@{/vendor/simple-line-icons/css/simple-line-icons.css}"></link>
　　<link rel="stylesheet" th:href="@{/media/css/bootstrap.css}" id="bscss"></link>
　　<link rel="stylesheet" th:href="@{/media/css/app.css}" id="maincss"></link>
　　<link rel="stylesheet" th:href="@{/media/css/theme-i.css}" id="maincss"></link>
</head>
<body>
   <div class="wrapper">
      <div class="block-center mt-xl wd-xl">
         <div class="panel panel-dark panel-flat">
            <div class="panel-heading text-center">
               <a href="/">
                  <img src="/img/logo.png" alt="Image" class="block-center img-rounded"/></a>
            </div>
            <div class="panel-body" id="forgotPasswordPage">
               <p class="text-center pv">重置密码</p>
               <form id="form" data-parsley-validate="true" onsubmit="return false">
               	  <p class="text-center pv">请填写您的登录邮箱来收取密码重置邮件</p>
                  <div class="form-group has-feedback">
                     <input id="email" name="email" type="email" placeholder="输入邮箱" class="form-control" v-model="email"  data-parsley-required-message="请输入邮箱地址" data-parsley-type-message="请输入正确的邮箱地址" required="required"/>
                     <span class="fa fa-envelope form-control-feedback text-muted"></span>
                  </div>
                  <button id="sendEmailButton" onclick="sendEmail();" class="btn btn-block btn-primary mt-lg">发送重置邮件</button>
               </form>
               <p></p>
               <div id="errorMsg" class="alert alert-danger text-center" style="display:none;"></div>
            </div>
         </div>
         <div class="p-lg text-center">
            <span>&copy;</span>
            <span>2016</span>
            <span>-</span>
            <span>2018</span>
            <br/>
            <span>cloudfavorites@126.com</span>
         </div>
      </div>
   </div>
   <script type="text/javascript" src="/webjarslocator/jquery/jquery.min.js"></script>
   <script th:src="@{/webjars/vue/1.0.24/vue.min.js}"></script>   
   <script th:src="@{/webjars/vue-resource/0.7.0/dist/vue-resource.min.js}"></script>
   <script th:src="@{/vendor/parsleyjs/dist/parsley.min.js}"></script> 
   <script type='text/javascript'>
	   function sendEmail() {
		    var ok = $('#form').parsley().isValid({force: true});
	   		if(!ok){
	   			return;
	   		}
			var url = '/user/sendForgotPasswordEmail';
			$('#sendEmailButton').attr("disabled",true);
			$("#sendEmailButton").text("发送中...");
			$("#errorMsg").hide();
			$.ajax({
				url : url,
				data : $("#form").serialize(),
				type : 'POST',
				dataType : "json",
				error : function(XMLHttpRequest, textStatus, errorThrown) {
				},
				success : function(data, textStatus) {
					if(data.rspCode == '000000'){
						$('#sendEmailButton').removeAttr("disabled");
						$("#sendEmailButton").text("再次发送重置邮件");
						$("#errorMsg").html("重置邮件已发送，请至邮箱查收");
	      	    		$("#errorMsg").show();
	      	    	}else{
	      	    		$('#sendEmailButton').removeAttr("disabled");
	      	    		$("#sendEmailButton").text("发送重置邮件");
	      	    		$("#errorMsg").html(data.rspMsg);
	      	    		$("#errorMsg").show();
	      	    	}
				}
			});
		}
   </script>
</body>
</html>